<template>
  <div class="edit_profile">
    <myheader title="编辑个人信息">
      <!-- 是用字体图标 slot 具名插槽 slot="放的位置" -->
      <van-icon name="arrow-left" slot="left" @click="$router.go(-1)" />
      <van-icon
        name="wap-home-o"
        slot="right"
        @click="$router.push({ path: '/index' })"
      />
    </myheader>
    <div class="userImg">
      <img :src="userinfo.head_img" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <mycell title="昵称" @click="show = !show" :desc="userinfo.nickname">
    </mycell>
    <van-dialog
      v-model="show"
      title="修改昵称"
      show-cancel-button
      @confirm="editNickname"
      @open="hardlerOpen"
    >
      <van-field label="昵称" placeholder="请输入新的昵称" v-model="nickname" />
    </van-dialog>
    <mycell
      title="密码"
      :desc="userinfo.password"
      type="pass"
      @click="passShow = !passShow"
    ></mycell>
    <van-dialog
      v-model="passShow"
      title="修改密码"
      show-cancel-button
      @confirm="hardlerPass"
      :before-close="beforeClose"
    >
      <van-field
        required
        label="原始密码"
        placeholder="请输入原始密码"
        v-model="originPass"
      />
      <van-field
        required
        label="新密码"
        placeholder="请输入新密码"
        v-model="newPass"
      />
    </van-dialog>
    <mycell
      title="性别"
      :desc="userinfo.gender == 0 ? '女' : '男'"
      @click="genderShow = !genderShow"
    ></mycell>
    <van-dialog
      v-model="genderShow"
      title="修改性别"
      @confirm="handlerGender"
      show-cancel-button
    >
      <van-picker
        :columns="['女', '男']"
        :default-index="userinfo.gender"
        @change="getChange"
      />
    </van-dialog>
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import mycell from "@/components/mycell.vue";
import axios from "@/utils/myaxios.js";
import { getUserInfo, editUser } from "@/apis/user.js";
import { uploadFile } from "@/apis/fileUpload";
export default {
  data() {
    return {
      show: false, // 昵称
      passShow: false, // 密码
      genderShow: false, //性别
      userinfo: {}, // 定义请求的数据
      nickname: "", // 双向绑定的值
      originPass: "", // 原始密码
      newPass: "", // 新的密码
      newgender: "", //性别
    };
  },
  components: {
    myheader,
    mycell,
  },
  methods: {
    getChange(a, b, c) {
      // console.log(a, b, c);
      this.newgender = c;
    },

    // 修改性别
    async handlerGender() {
      let result = await editUser(this.userinfo.id, {
        gender: this.gender,
      });
      if (result.data.message == "修改成功") {
        this.$toast.success("修改成功");
      }
      // console.log(result);
      // 重置值
      this.userinfo.gender = this.newgender;
    },

    // 修改密码时阻止弹窗关闭
    beforeClose(action, done) {
      // 如果不等于原始密码就不关闭弹窗
      // console.log(action);
      if (action == "confirm" && this.originPass !== this.userinfo.password) {
        this.$toast.fail("原始密码错误");
        done(false);
      } else {
        // 如果用户点击取消就关闭弹框
        done();
        // 延迟器
        setTimeout(() => {
          this.originPass = this.newPass = "";
        }, 200);
      }
    },
    // 修改密码
    async hardlerPass() {
      // 1 判定用户输入的原始密码是否正确
      // console.log(this.userinfo.password);
      if (this.originPass == this.userinfo.password) {
        // 2 如果输入正确 则获取用户输入的新密码进行编辑请求
        let result = await editUser(this.userinfo.id, {
          password: this.newPass,
        });
        // 如果输入修改成功就提示用户
        if (result.data.message == "修改成功") {
          this.$toast.success("修改成功");
          // this.userinfo.password = result.data.data.password;
        }
        // 这里的是把用户修改新的密码赋值给当前的原始密码
        this.userinfo.password = this.newPass;
        console.log(result);
      } else {
        // 如果用户原始密码输入错误则就提示用户
        this.$toast.fail("原始密码错误");
      }
    },

    // 弹窗关闭是触发
    hardlerOpen() {
      this.nickname = this.userinfo.nickname;
    },
    // 修改昵称
    async editNickname() {
      // 判断 输入修改的内容不能为空 如果为空就提示用户
      if (this.nickname.trim().length == 0) {
        this.$toast.fail("请输入昵称");
        return;
      }
      let result = await editUser(this.userinfo.id, {
        nickname: this.nickname,
      });
      // 如果修改成功就提示用户
      if (result.data.message == "修改成功") {
        this.$toast.success("修改成功");
      }
      // console.log(result);
      // 修改成功后直接把修改的值赋值给当前的双向绑定的值
      this.userinfo.nickname = this.nickname;
    },

    // 触发afterRead的时候，仅仅是说明是这个组件已经获取到用户选择的文件对象
    async afterRead(myfile) {
      // console.log(myfile);
      // 实现文件的上传 同时还要实现用户的编辑 发送请求
      let myfata = new FormData();
      myfata.append("file", myfile.file);
      let res = await uploadFile(myfata);
      // console.log(res);
      // 把上传的图片赋值给当前的图片地址
      this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url;
      // 发送请求 更新图片 editUser(第一个参数是当前的id,第二个是当前图片的值)
      let result = await editUser(this.userinfo.id, {
        head_img: res.data.data.url,
      });
      console.log(result);
    },
  },

  async mounted() {
    let id = this.$route.params.id;
    // console.log(this.$route);  $route 可以获取到路由的参数
    // console.log(id); id 值为1
    let res = await getUserInfo(id);
    console.log(res); //  获取成功
    // 把获取到的数据赋值个定义的userinfo
    this.userinfo = res.data.data;
    // 赋值给弹出框的内容
    this.nickname = this.userinfo.nickname;
    // 判断图片
    if (this.userinfo.head_img) {
      // 如果当前的数据有图片就使用路径和图片地址坐拼接
      this.userinfo.head_img = axios.defaults.baseURL + this.userinfo.head_img;
    } else {
      // 如果数据没有图片 就给一个默认的图片做基准路径的拼接
      this.userinfo.head_img =
        axios.defaults.baseURL + "/uploads/image/pages.png";
    }
  },
};
</script>

<style lang="less" scoped>
.edit_profile {
  .userImg {
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    // /deep/ 重置文件上传的演示 使用深度选择器 能够在父组件影响子元素
    /deep/.van-uploader__upload {
      width: 90/360 * 100vw;
      height: 90/360 * 100vw;
    }
    /deep/ .van-uploader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }
  }
}
</style>